<template>
    <div class="body">
    <img
      src="../../assets/img/fen/yuanfuda.png"
      class="images"
      alt=""
    >
    <div class="bak">
      <img
        src="../../assets/img/fen/shopping.png"
        class="image"
        alt=""
      >

      <van-form
        ref="form"
        @submit="onSubmit"
        validate-first
      >
        <div class="box">
          <van-field
            disabled
            v-model="uname"
            name="uname"
            label="门店名称:"
          />
        </div>
        <div class="box">
          <van-field
            disabled
            v-model="ubian"
            name="ubian"
            label="门店编码:"
          />
        </div>
        <div class="box">
          <van-field
            v-model="number"
            name="number"
            type="number"
            maxlength="11"
            label="手机号码:"
            placeholder="输入手机号"
            :rules="pattern"
          />
        </div>
        <div class="box">
          <van-field
            v-model="password"
            name="password"
            type="number"
            maxlength="6"
            label="验证码:"
            placeholder="输入验证码"
            :rules="codeRules"
          >
            <template #button>
              <van-count-down
                :time="1000 * 60"
                format="ss s"
                v-if="isdown"
                @finish="isdown = false"
              />
              <van-button
                v-else
                @click="huo"
                size="small"
                color="#ff4fa8"
                native-type="button"
              >发送验证码</van-button>
            </template>
          </van-field>
        </div>
        <div style="margin-top: 20px;">
          <van-button
            round
            block
            color="#ffb93f"
            @click="submit"
            native-type="button"
          >提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import bridge from '../../js/js1'
import { Yan, Mobile } from '@/api/index'
import { shared } from '../../js/Fen'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      system: getSystem(),
      uname: '',
      id: '',
      ubian: '',
      number: '',
      password: '',
      pattern: [{
        required: true,
        message: '手机号码不能为空',
        trigger: 'onBlur'
      }, {
        //自定义检验规则
        validator: value => {
          return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            .test(value)
        },
        message: '请输入正确格式的手机号码',
        trigger: 'onBlur'
      }],
      codeRules: [{
        required: true,
        message: '验证码不能为空',
        trigger: 'onBlur'
      }, {
        pattern: /^\d{6}$/,
        message: '验证码格式错误'
      }],// 验证码验证
      isdown: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.id = this.$route.query.uid
    this.uname = this.$route.query.uname
    this.ubian = this.$route.query.ubian
    this.system = getSystem()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    onSubmit (values) {
      console.log('submit', values);
    },
    submit () {
      // 全局表单验证
      this.$refs.form.validate().then(() => {
        this.$toast.success('提交成功')
        Mobile({
          phoneNumber: this.number,
          shardStationId: this.id,
          verifyCode: this.password
        }).then(res => {
          if (res.data.code == 1003) {
            this.$toast(res.data.msg)
            window.location.href = 'https://download.yuanfuda933.com/h5/other2.html#/share'
            return false
          } else if (res.data.code == 200) {
            this.$toast(res.data.msg)
            window.location.href = 'https://download.yuanfuda933.com/h5/other2.html#/new'
          } else {
            this.$toast(res.data.msg)
            window.location.href = 'https://download.yuanfuda933.com/h5/other2.html#/share'
          }
        }).catch(err => {
          console.log(err);
        })
      }).catch(() => {
        this.$toast.fail('提交失败')
      })
    },
    // 获取验证码
    async huo () {
      try {
        await this.$refs.form.validate('number')
      } catch (err) {
        return console.log(err);
      }
      this.isdown = true
      if (this.number) {
        console.log(this.number);
        Yan({
          mobiles: this.number
        }).then(res => {
          this.$toast(res.data.msg)
        }).catch(err => {
          console.log(err);
        })
      } else {
        this.$toast('请填写正确手机号')
      }

    },
  }
}
</script>

<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  height: 19.52rem;
  background: url("../../assets/img/fen/tou.png") no-repeat;
  background-size: contain;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .images {
    width: 5.706667rem;
    height: 3.28rem;
    display: block;
    margin: 0.666667rem auto 0;
  }
  .bak {
    width: 8.853333rem;
    height: 11.626667rem;
    background: url("../../assets/img/fen/kuang.png") no-repeat;
    background-size: contain;
    margin: -1.066667rem auto 0;
    .image {
      display: block;
      width: 2.773333rem;
      height: 2.213333rem;
      margin: 1.133333rem auto 0;
    }
    .box {
      width: 7.8rem;
      height: 1.203333rem;
      margin: 0 auto;
      margin-top: 0.32rem;
      border: 0.026667rem solid #ed3b55;
    }
    .box:nth-child(3) {
      height: 1.803333rem;
    }
    .box:nth-child(4) {
      height: 1.803333rem;
    }
    .van-form {
      width: 7.8rem;
      height: 12.626667rem;
      margin: 0 auto;
    }
  }
}
</style>
